<template>
    <el-menu
      :default-active="currentPath"
      class="el-menu-admin"
      router
      mode="vertical"
      background-color="rgba(70, 76, 91, 1)"
      text-color="#ccc"
      active-text-color="#409EFF"
      :collapse="isCollapse">
      <div style="height: 50px;"></div>
      <!--index 没有用但是必需字段-->
      <el-submenu  v-for="(item,i) in adminMenus" :key="i" :index="(i).toString()" style="text-align: left">
        <span slot="title" style="font-size: 17px;">
          <i :class="item.iconCls"></i>
          {{item.nameZh}}
        </span>
        <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
          <i :class="child.icon"></i>
          {{ child.nameZh }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: "NavMenu",

        methods: {

        },
      data(){
          return{
            isCollapse: false
          }
      },
      computed: {
        adminMenus () {
          return this.$store.state.adminMenus
        },
        currentPath () {
          return this.$route.path
        }
      }

    }
</script>

<style scoped>
  .el-menu-admin {
    border-radius: 5px;
    height: 100%;
  }
  .el-menu-item {
    background-color: #333  !important;
  }
  .el-aside {
    color: #8ddcf8;
  }
  .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
  }
  .el-menu-item.is-active {
    color: #a7def1 !important;
    background: #409EFF !important;
  }
  .el-submenu__title:focus, .el-submenu__title:hover{
    outline: 0 !important;
    color: #409EFF !important;
    background: none !important;
  }
</style>
